<template>
  <div class="background">
    <div class="article-info">
      <!-- 用户名和头像部分 -->
      <img
        src="https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500"
        alt=""
        class="article-img"
      />
      <span class="username">坤坤</span>
    </div>

    <!-- 点赞收藏 -->
    <van-grid :column-num="3">
      <van-grid-item icon="clock-o" text="历史记录" />
      <van-grid-item icon="star-o" text="我的收藏" to="/star" />
      <van-grid-item icon="like-o" text="我的点赞" to="/like" />
    </van-grid>

    <div class="cell">
      <van-cell title="推荐分享" is-link />
      <van-cell title="意见反馈" is-link />
      <van-cell title="关于我们" is-link />
      <van-cell title="退出登录" is-link />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.background {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  padding-left: 8px;
  padding-right: 16px;
}
.article-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.article-info {
  margin-bottom: 30px;
  padding-top: 20px;
  display: flex;
  align-items: center;
}
.username {
  margin-left: 16px;
}
.cell {
  margin-top: 16px;
}
</style>